
class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            target: {
                classname: ''
            },
            ishide: 'none',
            orders: "",
            counts: [],
            start: 0,
            qrcount: 0,
            pagesize: 12,
            keyword: '',
            // showswitch:!0,
            pagestart: 0,
            list: [
            ],
            ercodename: '',
        };
    }

    formatlist(list) {
        var listitem = [];
        console.log(list, 'listlistlist')
        list.forEach((x, i) => {
            // console.log(x,'x.startx.start')
            listitem.push(
                <tr key={i}>
                    <td>{x.id}</td>
                    <td className="tconter">{x.name}</td>
                    <td className="tconter">{formatDate(new Date(x.updateDate))}</td>
                    <td className='operate' id={"ope" + x.id}>
                        <div>
                            <img src="./src/ewm.png" />
                            <p className='edit' onClick={this.ercode.bind(this, x.name, x.id)}>生成二维码</p>
                        </div>
                    
                        <div>
                            <img src="./src/del.png" />
                            <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                        </div>

                    </td>
                </tr>
            )
        });
        this.setState({ listitem, list, originallist: list })
    }


    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        classdel(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            }
        })
    }
    // 生成二维码
    ercode(name, e) {
        this.setState({ showswitch: !0, ercodename: name }, () => {
            new QRCode($("#qrcode")[0], "./classes.html?id=" + e);
            // new QRCode($("#qrcode")[0], "http://www.runoob.com");
        })
    }
    // 二维码关闭
    close() {
        $('#qrcode').html("")
        this.setState({ showswitch: !1 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    getnew(start) {
        this.setState({ clicknew: !0 })
        $('#div').toggle()
    }
    add() {

    }
    submit() {
        var { list, start } = this.state;
        var { classname } = this.state.target, _this = this, err = ''
        if (classname.length == 0) err = "请输入班级名称"
        list.map((x, i) => {
            if (x.name == classname) err = "班级名称重复";
            return;
        })
        if (err.length > 0) {
            alert(err);
            return
        }
        classadd(classname, res => {
            if (res.issuccess == 1) {
                alert('添加成功!')
                $('#div').toggle()
                _this.freshlist(start)
            } else {
                alert(res.msg)
            }

        })

    }

    componentDidMount() {
        this.freshlist(0)
    }
    freshlist(start) {
        let { pagesize } = this.state;
        classgetlist({ pagesize, start }, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }


    setpage(e) {
        let { pagesize, state, start } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            this.freshlist(start, state)
        })
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts })
    }
    clickpage(e) {
        console.log(e)
        let { start, pagesize } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    inputchange(prop, e) {
        let { target } = this.state;
        target[prop] = e.target.value
        this.setState({ target })
    }

    render() {
        let { clicknew, counts, listitem, pagestart, classname, keyword, showswitch, ercodename, qrcount } = this.state;

        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal " id="modalOne">
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <span className="modal-title">{this.state.id > 0 ? "编辑" : "新建"}</span>
                                <img data-dismiss="modal" src="./src/close.png" className="del" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="">名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'classname')} value={classname} type="text" placeholder='请输入班级名称' className="input" />
                                </div>
                                <div className="modal-footer border">
                                    <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                    <button type="button" onClick={this.submit.bind(this)} id='btnimg_save' data-dismiss="modal" className="submitmod">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>




                <div className="qrcodemodal" style={{ display: showswitch ? "" : "none" }}>
                </div>
                <div className="qrcodebox" style={{ display: showswitch ? "" : "none" }}>

                    <div id={"qrcode"} className="qrcode" ></div>
                    <p>（图片上方右键保存）</p>
                    <p className="fontsize">{ercodename}</p>

                    <button className="btn add btn-primary center w40 height" onClick={this.close.bind(this)} >关闭</button>
                </div>

                <div className='content_wrap panel-default content_wrap'>

                    <div className='breadLine '>
                        当前位置 > 班级管理
                        </div>


                    <div className="content">
                        <div className="tabletit" >
                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>

                                    <th>id</th>
                                    <th className="tconter">班级名称</th>
                                    <th className="tconter">更新时间</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>

                    </div>


                    {/* <div style={{ display: clicknew ? "" : "none" }} id="div">
                        <div className="input-group">
                            <span className="input-group-addon">名称</span>
                            <input id='name' onChange={this.inputchange.bind(this, 'classname')} value={classname} type="text" placeholder='请输入班级名称' className="form-control" />
                        </div>
                        <div className='btns_bottom center'>
                            <button className='btn add btn-primary center w20' onClick={this.submit.bind(this)} id='btnimg_save' style={{ marginLeft: 50 }}>添加</button>
                        </div>
                    </div> */}
                    {/* <div className='search'>
                        <div className='number'>
                            <input onChange={this.searchinput.bind(this)} placeholder='输入电话号码获取姓名' value={keyword}/>
                            <p className='btn add btn-primary center' onClick={this.search.bind(this)}>查询</p>
                            <p style={{marginLeft:'10px'}} className='btn add btn-success center' onClick={this.reset.bind(this)}>返回</p>
                        </div>
                    </div> */}


                    <div className="pagerbox">
                        <p>共{this.state.total}条</p>
                        <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                    </div>


                </div>

            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='classes' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)